import {  SetupContext, defineComponent, inject, onMounted, ref} from 'vue';
import { AiMasterProps, aiMasterProps } from '../ai-master-props';
import { DesignerItemContext } from '../../../designer-canvas/src/types';
//import { useDesignerRules } from './use-designer-rules';
import { useDesignerComponent } from '../../../designer-canvas/src/composition/function/use-designer-component';

import '../ai-master.scss';

export default defineComponent({
    name: 'FAiMasterDesign',
    props: {
        ...aiMasterProps,
        sender: String,
        authorization: String,
        apiUrl: String
    },
    emits: [] as (string[] & ThisType<void>) | undefined,
    setup(props: AiMasterProps, context: SetupContext) {

        const elementRef = ref();
        const designItemContext = inject<DesignerItemContext>('design-item-context') as DesignerItemContext;
        //const designerRulesComposition = useDesignerRules(designItemContext.schema, designItemContext.parent?.schema);
        const componentInstance = useDesignerComponent(elementRef, designItemContext);

        onMounted(() => {
            elementRef.value.componentInstance = componentInstance;
        });

        context.expose(componentInstance.value);
        return () => {
            return (
                <div ref={elementRef}  id="aiMaster"   class="drag-container" dragref={`${designItemContext.schema.id}-container`}>
                 <div class="chat-input">
                    <input type="textarea" id="textMessage"/><button type="button" class="chat-input button">发送按钮</button>
                    </div>
                </div>
            );
        };
    }
});
